<template>
  <div class="leftMenu">
    <el-menu :default-openeds="['1', '2', '3']" default-active="/findmusic" router>
      <el-submenu index="1">
        <template slot="title">
          <span>推荐</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/find_music">
            <i class="iconfont icon-music"></i>发现音乐
          </el-menu-item>
          <el-menu-item index="/private_fm">
            <i class="iconfont icon-music_record"></i>私人FM
          </el-menu-item>
          <el-menu-item index="/look_live">
            <i class="iconfont icon-ico-fj-look"></i>LOOK直播
          </el-menu-item>
          <el-menu-item index="/video">
            <i class="iconfont icon-video"></i>视频
          </el-menu-item>
          <el-menu-item index="/friends">
            <i class="iconfont icon-friend"></i>朋友
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <span>我的音乐</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/local_music">
            <i class="iconfont icon-Music"></i>本地音乐
          </el-menu-item>
          <el-menu-item index="/download_manager">
            <i class="iconfont icon-download"></i>下载管理
          </el-menu-item>
          <el-menu-item index="/music_cloud_disk">
            <i class="iconfont icon-yunguanjia"></i>我的音乐云盘
          </el-menu-item>
          <el-menu-item index="/radio_station">
            <i class="iconfont icon-diantai"></i>我的电台
          </el-menu-item>
          <el-menu-item index="/collection">
            <i class="iconfont icon-collect"></i>我的收藏
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <span>我的音乐</span>
        </template>
        <el-menu-item-group>
          <el-menu-item :index="'3-' + index" v-for="(item, index) in getUserSonglist" :key="item.id" @click="toSongList(item.id)">
            <i :class="[index === 0 ? 'iconfont icon-icon-test' : 'iconfont icon-musicmenu']"></i>{{ item.name }}
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      currentUserInfo: window.localStorage.getItem('currentUserInfo') === 'null' ? null : JSON.parse(window.localStorage.getItem('currentUserInfo'))
    }
  },
  methods: {
    toSongList (id) {
      this.$router.push('/songs' + id)
    }
  },
  computed: {
    ...mapGetters(['getUserSonglist'])
  },
  created () {}
}
</script>

<style lang="less" scoped>
  .leftMenu {
    width: 18%;
    height: auto;
    border-right: 1px solid #f1f1f1;
    box-sizing: border-box;
    overflow: auto;
    .el-menu-item {
      display: flex;
      align-items: center;
      i {
        font-size: 20px;
        padding-right: 10px;
      }
    }
  }
</style>
